import { ref, Ref, onMounted, onUnmounted } from 'vue'

const useClickOutSide = (element: Ref<HTMLElement | null>) => {
	const isClickOutside = ref<boolean>(false)
	const handleEvent = (e: MouseEvent) => {
		if (element.value) {
			if (element.value.contains(e.target as HTMLElement)) {
				isClickOutside.value = false
			} else {
				isClickOutside.value = true
			}
		}
	}
	onMounted(() => {
		document.addEventListener('click', handleEvent)
	})
	onUnmounted(() => {
		document.removeEventListener('click', handleEvent)
	})
	return isClickOutside
}

export default useClickOutSide
